import Taro, { Component, Config } from "@tarojs/taro";
import {IStoreProps} from '../../store/Stores'
import {inject, observer} from '@tarojs/mobx'
import {View, Input, Picker, Image, Text, Form, Button} from "@tarojs/components";
import PageFooterInfo from '../../components/PageFooterInfo'
import PickerArea from "../../components/PickerArea";
import {getRuntime, projectTypeArr, projectDate, enterpriseQualificationArr} from "../../utils/common";

import './index.less'
import right from '../../assets/img/right.png'

// 工程金融中心-工程项目预约
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page3 extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    projectName:'', // 项目名称 ,
    projectTypeArr:projectTypeArr, // 项目类型 ,
    projectType:'', // 项目类型 ,
    needMoney:null, // 需要资金 ,
    address:'', // 国家/地区 ,
    timeLimitArr:projectDate, // 工期 ,
    timeLimit:'', // 工期 ,
    principal:'', // 负责人 ,
    phoneNumber:'', // 联系电话 ,
    emailAddress:'', // 邮箱地址 ,
    loading: false,
    disabled: false,
    submitText: '立即预约'
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '工程项目预约'})
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  pickerArea(res) {
    this.setState({
      address: res.province.label+res.city.label+res.distract.label
    })
  }

  changePicker(field:string,e) {
    this.setState({
      [field]: this.state[field+'Arr'][e.detail.value]
    })
  }

  submit(e) {
    let { address,projectType,timeLimit } = this.state
    let { projectName,needMoney,principal,phoneNumber,emailAddress } = e.detail.value
    if(!projectName) { getRuntime().showToast('请填写项目名称~'); return }
    if(!projectType) { getRuntime().showToast('请选择项目类型~'); return }
    if(!needMoney) { getRuntime().showToast('请填写需要资金~'); return }
    if(!address) { getRuntime().showToast('请选择国家/地区~'); return }
    if(!principal) { getRuntime().showToast('请填写负责人~'); return }
    if(!phoneNumber) { getRuntime().showToast('请填写联系电话~'); return }
    let { FinancialCenterStore } = this.props.stores
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    FinancialCenterStore.saveProjectSubscribe({
      form: {
        projectName,
        projectType,
        needMoney,
        address,
        timeLimit,
        principal,
        phoneNumber,
        emailAddress,
      },
      callback: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即预约'
        })
        getRuntime().navigateTo('/pages/finance/finance_success')
      }
    })
  }

  render() {
    let { projectTypeArr,projectType,timeLimitArr,timeLimit, loading,disabled,submitText } = this.state
    return(
      <View className='from-wrap'>
        <Form onSubmit={this.submit.bind(this)}>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name is-require'>项目名称</View>
              <Input className='from-input' name='projectName' placeholderClass='placeholder_class' placeholder='请填写项目名称' />
            </View>

            <View className='input-group'>
              <View className='input-name is-require'>项目类型</View>
              <Picker className='input-picker' name='projectType' mode='selector' range={projectTypeArr} onChange={this.changePicker.bind(this,'projectType')}>
                <View className='tt'>
                  {!projectType&& <View className='from-input picker-con placeholder-class' >请选择</View>}
                  {projectType&& <View className='from-input picker-con' >{projectType}</View>}
                  <Image className='drop-down-icon' src={right} />
                </View>
              </Picker>
            </View>

            <View className='input-group'>
              <View className='input-name is-require'>需要资金(万)</View>
              <Input className='from-input' name='needMoney' type='number' placeholderClass='placeholder_class' placeholder='请填写需要资金' />
            </View>

            <View className='input-group '>
              <View className='input-name is-require'>国家/地区</View>
              <PickerArea onPicketArea={this.pickerArea.bind(this)} />
            </View>
            <View className='input-group '>
              <View className='input-name'>工期</View>
              <Picker className='input-picker' name='timeLimit' mode='selector' range={timeLimitArr} onChange={this.changePicker.bind(this,'timeLimit')}>
                <View className='tt'>
                  {!timeLimit&& <View className='from-input picker-con placeholder-class' >请选择</View>}
                  {timeLimit&& <View className='from-input picker-con' >{timeLimit}</View>}
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>
          </View>

          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name is-require'>负责人</View>
              <Input className='from-input' name='principal' placeholderClass='placeholder_class' placeholder='请填写负责人' />
            </View>
            <View className='input-group'>
              <View className='input-name is-require'>联系电话</View>
              <Input className='from-input' name='phoneNumber' type='number' maxLength={11} placeholderClass='placeholder_class' placeholder='请填写联系电话' />
            </View>
            <View className='input-group'>
              <View className='input-name'>联系邮箱</View>
              <Input className='from-input' name='emailAddress' placeholderClass='placeholder_class' placeholder='请填写联系邮箱' />
            </View>
          </View>

          <Button className='page-submit' formType="submit"  loading={loading} disabled={disabled}>{submitText}</Button>
        </Form>
        <PageFooterInfo />
      </View>
    )
  }
}

export default Page3
